<template>
	<view class="box">
		<view class="icon-1">
		<!-- 	<navigator url="../change/change"> -->
				<view class="p">
					<image src="../../static/image/home/组%20857@3x.png" style="width: 45px; height: 45px;" mode="">
					</image>
					保养
				</view>
			<!-- </navigator> -->
			<!-- <navigator url="../pay/pay"> -->
				<view class="p">
					<image src="../../static/image/home/组%20859@3x.png" style="width: 45px; height: 45px;" mode="">
					</image>
					洗车
				</view>
			<!-- </navigator> -->
			<navigator url="../change/change">
				<view class="p">
					<image src="../../static/image/home/组%20860@3x.png" style="width: 45px; height: 45px;" mode="">
					</image>
					换胎
				</view>
			</navigator>
			<navigator url="../carmodification/carmodification">
			<view class="p">
				<image src="../../static/image/home/组%20861@3x.png" style="width: 45px; height: 45px;" mode=""></image>
				改装
			</view>
			</navigator>
		</view>
		<view class="icon-1">
			<view class="p">
				<image src="../../static/image/home/组%20862@3x.png" style="width: 45px; height: 45px;" mode=""></image>
				贴膜
			</view>
			<view class="p">
				<image src="../../static/image/home/组%20863@3x.png" style="width: 45px; height: 45px;" mode=""></image>
				救援拖车
			</view>
			<view class="p">
				<image src="../../static/image/home/组%20864@3x.png" style="width: 45px; height: 45px;" mode=""></image>
				汽车搭电
			</view>
			<view class="p">
				<image src="../../static/image/home/组%20865@3x.png" style="width: 45px; height: 45px;" mode=""></image>
				违章查询
			</view>
		</view>

		<view class="banner">
			<image src="../../static/image/home/组%20866@3x.png " style="width: 352px; height: 101px;" mode=""></image>
		</view>

		<view class="stor">
			<view class="left">
				<text>附近门店</text>
			</view>
			<view class="right">
				<text>查看更多门店</text>
			</view>
		</view>
		<view class="mendian">
			<view class="left">
				<image src="../../static/image/home/蒙版组%2014@3x.png" style="width: 60px; height: 60px;" mode=""></image>
			</view>
			<view class="mind">
				<text class="title-1">卡尔养车南站公园工厂店</text>
				<view class="mind-1">
					<image src="../../static/image/home/组%20501@3x.png" style="width: 47px; height: 8px;" mode="">
					</image>
					<text class="title-1">服务次数4024单</text>
				</view>
				<view>
					<text>限时免费服务</text>
				</view>
			</view>
			<view class="right">
				<image src="../../static/image/home/路径%2035@3x.png" style="width: 22px; height: 22px;" mode=""></image>
				<br>
				<text>3.22km</text>
			</view>
		</view>
		<view class="mendian">
			<view class="left">
				<image src="../../static/image/home/蒙版组%2014@3x.png" style="width: 60px; height: 60px;" mode=""></image>
			</view>
			<view class="mind">
				<text class="title-1">卡尔养车南站公园工厂店</text>
				<view class="mind-1">
					<image src="../../static/image/home/组%20501@3x.png" style="width: 47px; height: 8px;" mode="">
					</image>
					<text class="title-1">服务次数4024单</text>
				</view>
				<view>
					<text>限时免费服务</text>
				</view>
			</view>
			<view class="right">
				<image src="../../static/image/home/路径%2035@3x.png" style="width: 22px; height: 22px;" mode=""></image>
				<br>
				<text>3.22km</text>
			</view>
		</view>
		<view class="stor">
			<view class="left">
				<text>限时特惠</text>
			</view>
			<view class="right">
				<image src="../../static/image/home/组%20868@3x.png" style="width: 114px; height: 20px;" mode=""></image>
			</view>
		</view>
		<view class="goods">
			<view class="box">
				<view class="top">
					<text>美孚1号 全合成机油5W-30 4L</text>
				</view>
				<view class="buttom">
					<view>
						<text style="color:red;font-size: 18px; font-weight: bold;">￥289.00</text>
						<br>
						<text>已售66件</text>
					</view>
					<view>
						<image src="../../static/image/home/图像%2091@3x.png" style="width: 60px; height: 60px;" mode="">
						</image>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="top">
					<text>美孚1号 全合成机油5W-30 4L</text>
				</view>
				<view class="buttom">
					<view>
						<text style="color:red;font-size: 18px; font-weight: bold;">￥289.00</text>
						<br>
						<text>已售66件</text>
					</view>
					<view>
						<image src="../../static/image/home/图像%2091@3x.png" style="width: 60px; height: 60px;" mode="">
						</image>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="top">
					<text>美孚1号 全合成机油5W-30 4L</text>
				</view>
				<view class="buttom">
					<view>
						<text style="color:red;font-size: 18px; font-weight: bold;">￥289.00</text>
						<br>
						<text>已售66件</text>
					</view>
					<view>
						<image src="../../static/image/home/图像%2091@3x.png" style="width: 60px; height: 60px;" mode="">
						</image>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="top">
					<text>美孚1号 全合成机油5W-30 4L</text>
				</view>
				<view class="buttom">
					<view>
						<text style="color:red;font-size: 18px; font-weight: bold;">￥289.00</text>
						<br>
						<text>已售66件</text>
					</view>
					<view>
						<image src="../../static/image/home/图像%2091@3x.png" style="width: 60px; height: 60px;" mode="">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="stor">
			<view class="left">
				<text>精选好物</text>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;

		.icon-1 {
			display: flex;
			justify-content: space-around;
			margin-top: 10px;

			view {
				width: 45px;
				height: 45px;
				margin-top: 20px;
				font-size: 11px;
				// background-color: red;
				// align-items: center;
				text-align: center;
			}
		}

		.banner {
			width: 352px;
			height: 101px;
			margin: 0 auto;
			margin-top: 50px;
			// background-image:url(../../static/image/home/组%20866@3x.png);
		}

		.stor {
			margin-top: 10px;
			padding: 10px;

			// vertical-align:middle
			.left {
				font-size: 18px;
				color: #333333;
				font-weight: bold;
				float: left;
			}

			.right {
				float: right;
				font-size: 12px;
				color: #999999;
				// text-align:middle

			}
		}

		.mendian {

			padding: 10px;
			margin-top: 20px;
			display: flex;
			width: 345px;
			height: 101px;
			margin: 0 auto;
			background-color: #EFF5FF;
			align-items: center;

			.mind {
				margin-left: 10px;
				font-size: 16px;
				color: #333333;

				.mind-1 {
					display: flex;
					color: #999999;
					align-items: center;
				}
			}

			.right {
				text-align: center;
				float: right;
				margin-left: 20px;
			}
		}

		.goods {
			width: 345px;
			height: 217px;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 10px;

			.box {
				width: 170px;
				height: 100px;

				// background-color: red;
				.buttom {
					display: flex;
					justify-content: space-around;
					align-items: center;
				}
			}

		}
	}
</style>
